@extends('admin.layouts.app')

@section('title', '组织管理')

@section('content')
<div class="container-fluid">
    <!-- 页面头部 -->
    <div class="d-flex justify-content-between align-items-center mb-4 mt-3">
        <div>
            <h3 class="fw-bold text-dark mb-1">组织管理</h3>
            <p class="text-muted mb-0">管理组织架构和成员关系</p>
        </div>
        @can('create-organizations')
        <a href="{{ route('admin.organizations.create') }}" class="btn btn-primary">
            <i class="fas fa-plus me-2"></i>创建组织
        </a>
        @endcan
    </div>

    <!-- 消息提示 -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- 主要内容区域 - 自适应布局 -->
    <div class="row g-4">
        <!-- 左侧 - 组织树形结构 -->
        <div class="col-xxl-9 col-xl-8 col-lg-8 col-md-12">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="fw-bold mb-0">
                        <i class="fas fa-sitemap text-primary me-2"></i>
                        组织架构
                    </h5>
                </div>
                <div class="card-body">
                    @if($rootOrganizations->isEmpty() && $allOrganizations->isEmpty())
                        <div class="text-center py-5">
                            <i class="fas fa-building fs-1 text-muted mb-3"></i>
                            <h5 class="text-muted">暂无组织数据</h5>
                            <p class="text-muted">开始创建您的第一个组织吧</p>
                            @can('create-organizations')
                            <a href="{{ route('admin.organizations.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus me-2"></i>创建组织
                            </a>
                            @endcan
                        </div>
                    @elseif($rootOrganizations->isEmpty() && !$allOrganizations->isEmpty())
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            没有根组织，显示所有组织
                        </div>
                        <div class="organization-tree">
                            @foreach($allOrganizations as $organization)
                                @include('admin.organizations.partials.organization-item', ['organization' => $organization, 'level' => 0])
                            @endforeach
                        </div>
                    @else
                        <div class="organization-tree">
                            @foreach($rootOrganizations as $organization)
                                @include('admin.organizations.partials.organization-item', ['organization' => $organization, 'level' => 0])
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
        
        <!-- 右侧 - 组织统计和快速操作 -->
        <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-12">
            <!-- 组织统计 -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-0 py-3">
                    <h6 class="fw-bold mb-0">
                        <i class="fas fa-chart-bar text-info me-2"></i>
                        组织统计
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <span class="text-muted">总组织数</span>
                        <span class="badge bg-primary">{{ $allOrganizations->count() }}</span>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <span class="text-muted">根组织</span>
                        <span class="badge bg-success">{{ $rootOrganizations->count() }}</span>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <span class="text-muted">子组织</span>
                        <span class="badge bg-info">{{ $allOrganizations->count() - $rootOrganizations->count() }}</span>
                    </div>
                    <div class="d-flex align-items-center justify-content-between">
                        <span class="text-muted">活跃组织</span>
                        <span class="badge bg-warning">{{ $allOrganizations->where('is_active', true)->count() }}</span>
                    </div>
                </div>
            </div>

            <!-- 快速操作 -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-0 py-3">
                    <h6 class="fw-bold mb-0">
                        <i class="fas fa-bolt text-warning me-2"></i>
                        快速操作
                    </h6>
                </div>
                <div class="card-body">
                    @can('create-organizations')
                    <a href="{{ route('admin.organizations.create') }}" class="btn btn-outline-primary w-100 mb-2">
                        <i class="fas fa-plus me-2"></i>
                        创建组织
                    </a>
                    @endcan
                    
                    @can('view-users')
                    <a href="{{ route('admin.users.index') }}" class="btn btn-outline-success w-100 mb-2">
                        <i class="fas fa-users me-2"></i>
                        用户管理
                    </a>
                    @endcan
                    
                    @can('view-roles')
                    <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-info w-100">
                        <i class="fas fa-user-tag me-2"></i>
                        角色管理
                    </a>
                    @endcan
                </div>
            </div>

            <!-- 组织层级说明 -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <h6 class="fw-bold mb-0">
                        <i class="fas fa-info-circle text-primary me-2"></i>
                        层级说明
                    </h6>
                </div>
                <div class="card-body">
                    <div class="small text-muted">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-chevron-down text-primary me-2"></i>
                            <span>点击展开/收起子组织</span>
                        </div>
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-building text-success me-2"></i>
                            <span>根级组织</span>
                        </div>
                        <div class="d-flex align-items-center">
                            <i class="fas fa-sitemap text-info me-2"></i>
                            <span>子级组织</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 为所有展开/折叠按钮添加点击事件
        document.querySelectorAll('.toggle-children').forEach(function(toggle) {
            toggle.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                const organizationId = this.getAttribute('data-id');
                const childrenContainer = document.getElementById('children-' + organizationId);
                const icon = this.querySelector('i');
                
                if (childrenContainer) {
                    if (childrenContainer.style.display === 'none') {
                        // 展开
                        childrenContainer.style.display = 'block';
                        icon.classList.remove('fa-chevron-right');
                        icon.classList.add('fa-chevron-down');
                        
                        // 添加展开动画
                        childrenContainer.style.opacity = '0';
                        childrenContainer.style.transform = 'translateY(-10px)';
                        setTimeout(() => {
                            childrenContainer.style.transition = 'all 0.3s ease';
                            childrenContainer.style.opacity = '1';
                            childrenContainer.style.transform = 'translateY(0)';
                        }, 10);
                    } else {
                        // 折叠
                        childrenContainer.style.transition = 'all 0.3s ease';
                        childrenContainer.style.opacity = '0';
                        childrenContainer.style.transform = 'translateY(-10px)';
                        
                        setTimeout(() => {
                            childrenContainer.style.display = 'none';
                            icon.classList.remove('fa-chevron-down');
                            icon.classList.add('fa-chevron-right');
                        }, 300);
                    }
                }
            });
        });
        
        // 添加键盘导航支持
        document.addEventListener('keydown', function(e) {
            if (e.target.classList.contains('toggle-children')) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    e.target.click();
                }
            }
        });
    });
</script>
@endpush

@push('styles')
<style>
    .organization-tree {
        margin-top: 10px;
    }
    
    .organization-row {
        transition: all 0.2s ease;
        border: 1px solid #e9ecef !important;
    }
    
    .organization-row:hover {
        background-color: #f8f9fa !important;
        border-color: #0f766e !important;
        box-shadow: 0 2px 4px rgba(15, 118, 110, 0.1) !important;
    }
    
    .btn-xs {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
        line-height: 1.2;
        border-radius: 0.2rem;
    }
    
    .toggle-children:hover {
        color: #0f766e !important;
        background-color: rgba(15, 118, 110, 0.1);
        border-radius: 50%;
    }
    
    .organization-item {
        position: relative;
        transition: all 0.3s ease;
        margin-bottom: 0.5rem;
    }
    
    .organization-item:hover {
        transform: translateX(2px);
    }
    
    .organization-item::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: #dee2e6;
        display: none;
    }
    
    .organization-item[style*="margin-left"]::before {
        display: block;
    }
    
    .children-container {
        position: relative;
    }
    
    .toggle-children {
        display: inline-block;
        width: 20px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .toggle-children:hover {
        color: #0f766e;
        transform: scale(1.1);
    }
    
    .badge {
        font-weight: 500;
    }
</style>
@endpush
@endsection